<template>
	<div class="home">
		<img alt="Vue logo" src="../assets/logo.png" />
		<el-row>
			<el-button @click="onClick($event, msg)">{{ msg }}</el-button>
			<el-button @click="onClick($event, message)">{{ message }}</el-button>
			<el-button type="primary" @click="onClick($event, name)">{{ name }}</el-button>
		</el-row>
	</div>
</template>

<script lang="ts">
	import { Options, Vue } from "vue-class-component";

	@Options({
		props: {
			msg: {
				type: String,
				default: 'test',
			},
		},
		components: { }
	})
	export default class Home extends Vue {
		data() {
		    return {
				message: 'Hello!'
		    }
		}
		
		
		private name: string = '点击'; 
		
		created(){
			console.log('created');
		}
		mounted(){
			console.log('mounted');
		}
		
		onClick(event: any, name: string): void{
			event.stopPropagation();
			console.log(name)
		}
		
	}
</script>

<style scoped="scoped" lang="scss">
	.home {
		text-align: center;
	}
</style>
